iT邦幫忙

2024 iThome 鐵人賽
DAY 1
2
Security

資安這條路：系統化學習網站安全與網站滲透測試系列 第 1 篇

資安這條路：Day 1 建立環境與認識網站架構

16th鐵人賽
347 瀏覽

  • 分享至 

  • xImage
    •  

前言

為什麼從建立一個測試網站開始，在網站安全教學的過程中，如果直接從工具上手，多半會變成腳本小子，你會知道工具怎麼用，但不知道底層原理是什麼，因此這個系列會透過撰寫「有問題的網站」來講解漏洞的原理與成因，期待讓網站工程師更了解事情經過。

image

如何建立一個測試網站

本次我們將透過 Node.js 來建立一個不安全的網站與功能，以便學習和測試網站安全。這個過程將幫助我們理解網站架構，並為後續的安全測試奠定基礎。

環境準備

在開始之前，請確保系統已經安裝以下工具：

  • Linux 作業系統
  • Docker
  • Docker Compose

目標

  1. 建立實驗環境（lab）
  2. 了解網站架構與組成
  3. 了解 Node.js 架構

為什麼需要了解這些？

  • 學習網站安全：透過建立和分析易受攻擊的網站，我們可以更好地理解潛在的資安漏洞。
  • 自我提升：建立有弱點的網站可以幫助我們更深入地理解安全問題，並提高解決這些問題的能力。
  • 實作技能：這個過程還能幫助我們練習使用開發者工具，這是網站開發和安全測試中的重要技能。

建立實驗環境

Day 1 實驗環境

https://github.com/fei3363/ithelp_web_security_2024/commit/c953c613f907b932eda267169605fb7f705b322b

讓我們逐步建立必要的檔案和設定：

1. docker-compose.yml

這個檔案定義了我們的應用服務和資料庫服務：

version: '3'
services:
  app:
    build: 
      context: ./web
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - MONGODB_URI=mongodb://mongo:27017/myapp
      - NODE_ENV=development
    depends_on:
      - mongo
    volumes:
      - ./web:/usr/src/app
      - /usr/src/app/node_modules
  mongo:
    image: mongo:latest
    ports:
      - "27017:27017"
    volumes:
      - mongodb_data:/data/db
volumes:
  mongodb_data:

2. web/Dockerfile

這個 Dockerfile 用於建構我們的 Node.js 應用程式容器：

FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "run", "dev" ]

3. web/package.json

定義了我們的 Node.js 應用程式相依套件和腳本：

{
  "name": "nodejs-docker-app",
  "version": "1.0.0",
  "description": "A simple Node.js app with Docker",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

4. web/public/index.html

這是我們的前端頁面：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測試網頁</title>
    <style>
        body { font-family: "微軟正黑體", Arial, sans-serif; text-align: center; padding-top: 50px; }
        #message { margin-top: 20px; font-weight: bold; }
    </style>
</head>
<body>
    <h1>歡迎來到測試網頁</h1>
    <p>這是一個由 Express.js 建立的簡單測試頁面</p>
    <button onclick="fetchMessage()">從 API 取得資訊</button>
    <div id="message"></div>
    <script>
        function fetchMessage() {
            fetch('/api/hello')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('message').innerText = data.message;
                })
                .catch(error => console.error('錯誤:', error));
        }
    </script>
</body>
</html>

5. web/server.js

這是我們的後端伺服器程式碼：

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from the server!' });
});

app.listen(port, () => {
  console.log(`伺服器執行在 http://localhost:${port}`);
});

理解網站架構

透過這個設定，我們可以了解到基本的網站架構：

  1. 前端（index.html）：提供使用者介面和基本的互動功能。
  2. 後端（server.js）：處理 API 請求，提供資料和業務邏輯。
  3. 資料庫（MongoDB）：儲存和管理資料（今日並未直接使用）。

Node.js 架構

Node.js 允許我們使用 JavaScript 來編寫伺服器端程式碼。在我們的例子中：

  1. 使用 Express.js 框架來簡化 HTTP 伺服器的建立和路由管理。
  2. 靜態檔案（如 index.html）透過 sendFile 方法直接發送到使用者端。
  3. API 端點（如 /api/hello）透過 app.get() 方法定義，並回傳 JSON 資料。

練習查看網站

為了方便讀者學習，我在自己的網站上架設了相同的實驗環境，以利大家學習網站安全。
大家可以瀏覽 nodelab.feifei.tw 來觀察這個實驗環境。進入網站後，我們可以觀察幾個重要的事項：

顯示不安全的網站

當您瀏覽 nodelab.feifei.tw 時，瀏覽器會顯示這是一個不安全的網站。

不安全的網站警告

  • 原因：這是因為我們尚未使用 HTTPS 協定，也就是說，網站沒有設定 SSL/TLS 憑證。
  • 安全影響：沒有 HTTPS 意味著網站與使用者之間的通訊是未加密的，可能被第三方攔截或竄改。
  • 學習重點：了解 HTTPS 的重要性，以及如何識別安全和不安全的網站連接。

開啟開發者工具觀察

開發者工具是學習和分析網站安全的重要工具。以下是如何開啟和使用開發者工具：

  1. 開啟方式：

    • 使用鍵盤快捷鍵：按 F12 鍵（大多數瀏覽器適用）
    • 在 Chrome 瀏覽器中，點擊右上角的選單 > 更多工具 > 開發人員工具
    • 在 Firefox 中，點擊選單 > 網頁開發者 > 切換工具箱

  2. 使用開發者工具觀察：

    • 網路（Network）標籤：觀察網頁載入時的所有請求，包括 API 呼叫
    • 元素（Elements）標籤：檢查和修改網頁的 HTML 結構
    • 主控台（Console）標籤：查看 JavaScript 錯誤和日誌輸出
    • 應用程式（Application）標籤：檢查 cookies、瀏覽器儲存資訊等

  3. 安全相關觀察：

    • 檢查網路請求是否使用 HTTPS
    • 觀察 cookies 的設定，特別是它們的安全屬性
    • 查看是否有敏感資訊通過不安全的方式傳輸

透過使用開發者工具，我們可以深入了解網站的運作方式，這對於識別潛在的安全問題非常有幫助。在接下來的課程中，我們將更詳細地探討如何利用這些工具來發現和分析各種安全漏洞。

練習：

  1. 瀏覽 nodelab.feifei.tw
  2. 開啟開發者工具
  3. 觀察網路請求，特別注意 API 呼叫（/api/hello）
  4. 檢查主控台是否有任何警告或錯誤訊息

練習一：分析網站請求與回應封包

在這個練習中，我們將深入了解當我們存取一個網站時，瀏覽器與伺服器之間實際發生的通訊過程。我們會特別關注請求封包（Request）和回應封包（Response）的內容。

步驟：

  1. 存取 nodelab.feifei.tw
  2. 開啟瀏覽器的開發者工具（按 F12 或右鍵選擇「檢查」）
  3. 切換到「網路」（Network）分頁
  4. 重新整理頁面，觀察出現的網路請求

網路請求概覽

在網路請求列表中，找到並點選 nodelab.feifei.tw 的請求：

選擇主要請求

接下來，我們將分別查看請求封包和回應封包的內容。

分析請求封包（Request）

在右側面板中，切換到「標頭」（Headers）分頁，然後勾選顯示「原始」（Raw）選項來查看原始的請求標頭：

請求標頭原始內容

請求封包內容解釋：

GET / HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,zh-TW;q=0.8,zh;q=0.7,en-GB;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Host: nodelab.feifei.tw
Pragma: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0
  • GET /: 這是 HTTP 方法和請求的路徑。GET 表示我們想要獲取資源，/ 表示我們請求的是網站的根目錄。
  • Accept: 指定使用者端能夠接受的內容類型。
  • Accept-Encoding: 指定使用者端能夠接受的內容編碼方式。
  • Accept-Language: 指定使用者端偏好的語言。
  • Cache-Control 和 Pragma: 用於控制快取行為。
  • Host: 指定請求的目標主機。
  • Upgrade-Insecure-Requests: 表示使用者端支持升級到 HTTPS 連接。
  • User-Agent: 提供有關使用者端瀏覽器和作業系統的資訊。

分析回應封包（Response）

同樣在「標頭」分頁中，我們可以查看伺服器的回應標頭：

HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Sat, 14 Sep 2024 15:21:34 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: Express
Cache-Control: public, max-age=0
Last-Modified: Sat, 14 Sep 2024 14:42:57 GMT
ETag: W/"3be-191f0fcaf94"
Content-Encoding: gzip

回應封包內容解釋：

  • HTTP/1.1 200 OK: 表示請求成功。
  • Server: 指出伺服器使用軟體與作業系統。
    • 可能會有資安問題，知道版本找已知漏洞。
  • Date: 回應的日期和時間。
  • Content-Type: 指定回應內容的類型。
  • Transfer-Encoding: 指定回應內容的傳輸編碼方式。
  • Connection: 指定連接的狀態。
  • X-Powered-By: 額外資訊，使用了 Express 框架。
    • 可能會有資安問題，知道框架找更好找漏洞。
  • Cache-Control: 指定快取控制策略。
  • Last-Modified: 資源最後修改的時間。
  • ETag: 資源的版本標識符。
  • Content-Encoding: 指定回應內容的編碼方式。

安全性考量

  1. 敏感資訊洩漏：請注意請求和回應封包中是否包含敏感資訊。例如，User-Agent 可能洩漏使用者端軟體版本。
  2. 安全標頭缺失：注意是否缺少重要的安全相關標頭，如 Strict-Transport-Security、Content-Security-Policy 等。
  3. 伺服器資訊洩漏：Server 和 X-Powered-By 標頭可能洩漏伺服器和框架版本，這可能被攻擊者利用。
  4. 不安全的連接：注意到這是一個 HTTP 連接，而非 HTTPS，代表資料傳輸是未加密的。

通過分析這些封包，我們可以更好地理解網站的運作方式，並識別潛在的安全問題。

練習二：分析 API 呼叫（/api/hello）

在這個練習中，我們將觀察並分析一個簡單的 API 呼叫。這將幫助我們了解前端如何與後端通訊，以及如何識別和檢查 API 請求。

步驟：

  1. 在 nodelab.feifei.tw 頁面上，點選「從 API 取得資訊」按鈕
  2. 觀察開發者工具中的網路分頁

API 呼叫概覽

觀察重點

  1. 請求類型的區別：
    • 頁面載入時的主要請求類型是 Document（文件）
    • API 呼叫的請求類型是 Fetch（取得）
  2. 回應內容類型：
    • API 回應的 Content-Type 標頭為 application/json; charset=utf-8

API 回應詳情

深入分析

  1. API 請求特徵：
    • 路徑：注意到 API 請求的路徑是 /api/hello
    • 方法：觀察使用的 HTTP 方法（在這個例子中是 GET）
  2. 回應內容：
    • 檢查回應的 JSON 內容，了解 API 回傳的資料結構
    • 思考：這些資料是否包含敏感資訊？是否需要額外的保護？
  3. 安全性考量：
    • 檢查是否有適當的授權機制（如 API 金鑰或 token）
    • 觀察是否使用 HTTPS 加密傳輸（在這個例子中沒有使用，這是一個安全問題）
    • 檢查回應標頭中是否包含適當的安全標頭（如 Content-Security-Policy）
  4. 效能考量：
    • 觀察 API 呼叫的回應時間
    • 檢查回應大小，考慮是否有優化空間
  5. 錯誤處理：
    • 嘗試修改 API 請求（例如更改路徑），觀察錯誤回應
    • 檢查前端如何處理 API 錯誤（例如，網路錯誤或伺服器錯誤）

練習題

  1. 嘗試使用開發者工具的網路分頁，找出 /api/hello 的完整請求和回應內容。
  2. 分析 API 回應的 JSON 結構，它包含哪些資訊？
  3. 比較頁面載入（Document 請求）和 API 呼叫（Fetch 請求）的回應標頭有何不同？
  4. 思考：如果這個 API 需要傳輸敏感資訊，我們應該採取哪些額外的安全措施？

回顧本篇

在這篇文章中，我們深入探討了如何建立一個基本的網站環境，並學習了分析網站結構和通訊的基礎知識。以下是本篇的主要重點：

  1. 環境建置：我們學習了如何使用 Docker 和 Node.js 建立一個簡單的網站環境，包括前端、後端和資料庫的基本設定。
  2. 網站架構：我們了解了基本的網站架構，包括前端、後端和資料庫的角色和互動方式。
  3. 開發者工具的使用：我們學習了如何使用瀏覽器的開發者工具來分析網站的運作，特別是觀察網路請求和回應。
  4. HTTP 通訊分析：我們深入研究了 HTTP 請求和回應的結構，學習如何解讀各種 HTTP 標頭和其安全含義。
  5. API 呼叫分析：我們觀察了一個簡單的 API 呼叫，了解了前後端如何透過 API 進行通訊，以及如何分析 API 請求和回應。
  6. 安全性考量：透過本篇，我們提到了多個與網站安全相關的重點，如 HTTPS 的重要性、敏感資訊的處理、以及伺服器資訊洩漏等問題。

這些知識為我們後續深入研究網站安全提供了重要的基礎。在接下來的文章中，我們將基於這些基礎知識，進一步探討更多具體的網站安全問題和解決方案。


下一篇
資安這條路：Day 2 了解使用者輸入與輸出與前端關係
系列文
資安這條路：系統化學習網站安全與網站滲透測試 共 13 篇
  1. 9
    資安這條路：Day 9 從登入功能了解 SQL injection
  2. 10
    資安這條路：Day 10 從文章功能了解 Union Select SQL injection
  3. 11
    資安這條路：Day 11 從文章過濾惡意輸入了解 SQL injection 自動化工具 SQLmap
  4. 12
    資安這條路：Day 12 探索 ORM 機制與網站檔案上傳漏洞
  5. 13
    資安這條路：Day 13 探索 NoSQL injection 以及防範措施
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1047 組
團體組數
40 組
累計文章數
13589 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 16th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react 資訊安全
熱門問題
熱門回答
熱門文章
IT邦幫忙